// 封装组合式api有一定的规范

import { onMounted, onUnmounted, ref } from "vue"


// 知名的组合式api三方库 =》 @vueuse/core

// 1. 组合式api的函数名必须为useXXX
export function useWidth() {
  // 以下逻辑会被复用 所以封装出去 组合式api  composable
  const width = ref(0) // 永远只会拿到项目初次运行时的屏幕宽度
  const changeSize = () => {
    // console.log('尺寸变了')
    width.value = window.innerWidth
  }

  onMounted(() => {
    changeSize() // 组件挂载后 先获取一次初值
    // 屏幕尺寸变化时  width要更新
    window.addEventListener('resize', changeSize)
  })

  // 卸载页面需要移除监听器
  onUnmounted(() => {
    window.removeEventListener('resize', changeSize)
  })

  return {
    width,
    changeSize
  }
}
